<template>
    <div :style="'height:' + height + 'px'" class="videoInfo">
        <div class="video">
            <video-player  class="video-player-box"
                           ref="videoPlayer"
                           :options="playerOptions"
                           :playsinline="true"
                           customEventName="customstatechangedeventname"
                           @play="onPlayerPlay($event)"
                           @pause="onPlayerPause($event)"
                           @ended="onPlayerEnded($event)"
                           @statechanged="playerStateChanged($event)"
                           @ready="playerReadied"
                           @timeupdate="onPlayerTimeupdate($event)">
            </video-player>
        </div>
        <div class="bar">
            <div class="text">
                <!--<p class="title">{{play_title}}</p>-->
                <p class="time">{{infoData.people_num}}人收藏 | 时长：{{getMintue(play_time)}}</p>
            </div>
        </div>
         <share :shareData="shareData"  v-if="shareIos"  :bgColor="bgColor" />
    </div>
</template>

<script>
    import 'video.js/dist/video-js.css'
    import { videoPlayer } from 'vue-video-player'
    import share from '@views/home/components/share'
    export default {
        data () {
            return {
                bgColor:{
                    swiperColor:'#fff',
                    codeColor:'#F5F5F5'
                },
                shareIos:false,
                isAndroid:false,
                orgnation_id:'',
                isIOS:false,
                shareData:[],
                videoId:'',
                playTimeInterval:null,
                playingIndex:0,
                id:null,
                type:'',
                infoData:{
                    photo:'',
                    is_subscribe:0,
                    title:'',
                    people_num:0
                },
                play_time:0,
                play_title:'',
                noteWriteShow:false,
                checkbox:true,
                noteValue:'',
                navActive:0,
                playerOptions: {
                    // videojs options
                    autoplay: false, //如果true,浏览器准备好时开始回放。
                    muted: false, // 默认情况下将会消除任何音频。
                    loop: false, // 导致视频一结束就重新开始。
                    preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                    language: 'zh-CN',
                    aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                    fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                    playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
                    sources: [{
                        type: "video/mp4",
                        src: ""
                        // src: "http://mpge.5nd.com/2014/2014-12-29/65396/1.mp3"
                    }],
                    notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
                    poster: '',
                    controlBar: {
                        timeDivider: true,
                        durationDisplay: true,
                        remainingTimeDisplay: true,
                        fullscreenToggle: true  //全屏按钮
                    }
                },
                chapters_id: null,
                task_id:null,
                task_course_id:null
            }
        },
        created(){
            if(this.$route.query.fromIos){
                this.videoId = this.$route.query.id;
                this.orgnation_id =this.$route.query.orgnation_id
                this.shareIos =true;
            }
            this.height = window.innerHeight
            //微信内置浏览器浏览H5页面弹出的键盘遮盖文本框的解决办法
            window.addEventListener("resize", function () {
                if (document.activeElement.tagName == "INPUT" || document.activeElement.tagName == "TEXTAREA") {
                    window.setTimeout(function () {
                        document.activeElement.scrollIntoViewIfNeeded();
                    }, 0);
                }
            })
        },
        beforeDestroy() {
            clearInterval(this.playTimeInterval);
        },
        mounted() {
            this.getVideoInfo();
            var u = navigator.userAgent, app = navigator.appVersion;
            var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
            var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
            if (isAndroid) {
                //这个是安卓操作系统
                this.isAndroid =true;
                this.isIos =false;
                if(this.shareIos){
                    this.getAdShare(6)
                }
            }
            if (isIOS) {
                this.isAndroid =false;
                this.isIos =true;
                if(this.shareIos){
                    this.getAdShare(5)
                }
            }
        },
        computed: {
            player() {
                return this.$refs.videoPlayer.player
            }
        },
        methods: {
            getMintue(value){
                var m = Math.floor((value / 60));
                var s = Math.floor((value % 60));
                return m.toString().padStart(2, "0") + ":" + s.toString().padStart(2, "0");
            },
            getAdShare(id){
                this.$http
                    .get("app/My/add_list", {
                        org_id: this.orgnation_id,
                        position: id,
                    })
                    .then(res => {
                        if(res.code==200){
                            if(res.data.length>0){
                                this.shareData =res.data;
                            }else{
                                this.shareData=[
                                    {
                                        photo:'https://media.71ydj.com/17cd567662bafc8d63d73d41444585d2.jpg',
                                        link:'https://apps.apple.com/cn/app/id1434639733',
                                        remarks:'中纺机党建云',
                                    }
                                ]
                            }
                        }
                    })
            },
            getVideoInfo() {
                // alert(this.videoId)
                this.$http.get('app/My/video_info', {
                    id: this.videoId,
                    uid:Cookies.get("user_71ydj")?JSON.parse(Cookies.get("user_71ydj")).id:''
                }).then((res) => {
                    if (res.code == '200') {
                        this.playerOptions.sources[0].src=res.data.video_address;
                        this.infoData.people_num=res.data.collection_num;
                        this.playerOptions.poster = res.data.low_source;
                        this.play_time = res.data.video_duration
                        //     infoData:{
                        //     photo:'',
                        //         is_subscribe:0,
                        //         title:'',
                        //         people_num:0
                        // },

                    }
                })
            },
            subscribe(){
                let params = {
                    course_id: this.id,
                    type: this.type,
                    phone: JSON.parse(window.Cookies.get('user_71ydj')).phone,
                    status: 1
                }
                const url = `applets/Study/course_subscribe`
                this.$http.post(url, params).then(res => {
                    if(res.code === 200){
                        if(this.infoData.is_subscribe == 0){
                            this.$toast.success("订阅成功！");
                            this.infoData.is_subscribe = 1
                        }else{
                            this.$toast.success("取消成功！");
                            this.infoData.is_subscribe = 0
                        }
                    }else{
                        this.$toast.error(res.msg);
                    }
                })
            },
            // playList(item,index){
            //     this.playerOptions.sources[0].src = item.video_address
            //     this.playerOptions.poster = item.cover_map
            //     this.play_time = item.video_duration
            //     this.play_title = item.title
            //     this.playingIndex = index
            // },
            textareaBlur(){
                setTimeout(function() {
                    var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
                    window.scrollTo(0, Math.max(scrollHeight - 1, 0));
                }, 100);
            },
            sendNote(){
                if (!this.noteValue) {
                    return
                }
                this.noteWriteShow=false
                let params = {
                    phone: JSON.parse(window.Cookies.get('user_71ydj')).phone,
                    course_id: this.id,
                    type: this.type,
                    status: 1,
                    state: this.checkbox?1:2,
                    content: this.noteValue,
                    org_id: JSON.parse(window.Cookies.get('user_71ydj')).organization_id
                }
                const url = `applets/My/add_note`
                this.$http.post(url, params).then(res => {
                    if(res.code === 200){
                        this.$toast.success("发布成功！");
                        // this.noteValue=''
                    }else{
                        this.$toast.error(res.msg);
                    }
                })
            },
            // listen event
            onPlayerPlay(player) {
                // console.log('player play!', player)
                clearInterval(this.playTimeInterval);
                this.playTimeInterval = setInterval(() => {
                    this.infoData.chapters[this.playingIndex].timeUsed++;
                    // console.log(this.infoData.chapters[this.playingIndex].timeUsed)
                }, 1000);
            },
            onPlayerPause(player) {
                // console.log('player pause!', player)
                clearInterval(this.playTimeInterval);
            },
            onPlayerEnded(player){
                this.infoData.chapters[this.playingIndex].state = 1;
                this.infoData.chapters[this.playingIndex].is_complete = 1;
                if (this.infoData.chapters[this.playingIndex].id == this.chapters_id) {
                    let params = {
                        uid: JSON.parse(window.Cookies.get('user_71ydj')).id,
                        task_id: this.task_id,
                        task_course_id: this.task_course_id
                    }
                    const url = `applets/StudyPlay/record_learn`
                    this.$http
                        .post(url, params)
                        .then(res => {
                            if (res.code === 200) {
                            } else {
                                this.$toast.error(res.msg);
                            }
                        });
                }
            },
            // ...player event

            // or listen state event
            playerStateChanged(playerCurrentState) {
                // console.log('player current update state', playerCurrentState)
            },

            // player is ready
            playerReadied(player) {
                console.log('the player is readied', player)
                // you can use it to do something...
                // player.[methods]
            },
            onPlayerTimeupdate(){

            },

        },
        components: {
            videoPlayer,
            share
        }
    }
</script>
<style>
    .videoInfo .video-js .vjs-big-play-button,
    .videoInfo .video-js:hover .vjs-big-play-button{
        border: 0;
        background-color: transparent;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        font-size: 50px;
        color:rgba(255,255,255,.7);
    }
    .videoInfo .mu-checkbox-label{
        color:rgba(153,153,153,1);
    }
    .videoInfo .mu-checkbox-icon{
        margin-right: 0;
    }
</style>

<style lang="scss" scoped>
    .videoInfo{
        position: relative;
        top: 0;
        left: 0;
        box-sizing: border-box;
        .video{
            position: relative;
            top: 0;
            left: 0;
            width: 100%;
            // height: 219px;
        }
        >.bar{
            width: 100%;
            height:70px;
            background:rgba(255,255,255,1);
            box-shadow:3px 3px 10px 0px rgba(51,51,51,0.08);
            display: flex;
            box-sizing: border-box;
            padding: 20px 22px 15px 16px;
            justify-content: space-between;
            align-items: flex-start;
            .text{
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                .title{
                    width: 280px;
                    font-size:14px;
                    line-height: 14px;
                    margin-bottom: 10px;
                    font-family:PingFang-SC-Medium;
                    font-weight:500;
                    color:rgba(51,51,51,1);
                    overflow: hidden;
                    text-overflow:ellipsis;
                    white-space: nowrap;
                }
                .time{
                    font-size:12px;
                    line-height: 12px;
                    font-family:PingFang-SC-Medium;
                    font-weight:500;
                    color:rgba(153,153,153,1);
                }
            }
            .icon{
                display: flex;
                align-content: flex-start;
            }
        }
        >.content{
            overflow: scroll;
            width: 100%;
            // position: absolute;
            // top: 219px;
            height: calc(100% - 337px);
            >.nav{
                box-sizing: border-box;
                width: 100%;
                padding: 15px 16px;
                margin-bottom: 5px;
                li{
                    transition: all .1s linear;
                    display: inline-block;
                    font-size:13px;
                    font-family:PingFang-SC-Medium;
                    font-weight:500;
                    color:rgba(102,102,102,.6);
                    margin-right: 25px;
                    &.active{
                        position: relative;
                        font-size:15px;
                        font-family:PingFang-SC-Bold;
                        font-weight:bold;
                        color:rgba(51,51,51,1);
                        &::after{
                            content:'';
                            position: absolute;
                            left: 50%;
                            transform: translateX(-50%);
                            bottom: -8px;
                            width:80%;
                            height:3px;
                            background:linear-gradient(90deg,rgba(235,77,68,1) 0%,rgba(244,117,72,1) 100%);
                            border-radius:2px;
                        }
                    }
                }
            }
            >.title{
                display: flex;
                align-items: center;
                box-sizing: border-box;
                padding: 0 16px;
                img{
                    width:25px;
                    height:17px;
                    margin-right: 10px;
                }
                span{
                    font-size:15px;
                    font-family:PingFang-SC-Medium;
                    font-weight:bold;
                    color:rgba(51,51,51,1);
                }
            }
            >.c_list{
                box-sizing: border-box;
                width: 100%;
                padding: 0 17px 0 46px;
                li{
                    position: relative;
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    box-sizing: border-box;
                    padding: 20px 17px 7px 6px;
                    border-bottom: 1PX solid #CCCCCC;
                    .text{
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        .name{
                            width: 245px;
                            font-size:14px;
                            line-height: 14px;
                            font-family:PingFang-SC-Medium;
                            font-weight:500;
                            color:rgba(102,102,102,1);
                            margin-bottom: 8px;
                            overflow: hidden;
                            text-overflow:ellipsis;
                            white-space: nowrap;
                        }
                        .time{
                            font-size:11px;
                            line-height: 11px;
                            font-family:PingFang-SC-Medium;
                            font-weight:500;
                            color:rgba(153,153,153,1);
                        }
                    }
                    .state{
                        font-size:12px;
                        line-height: 12px;
                        font-family:PingFang-SC-Medium;
                        font-weight:500;
                        color:rgba(102,102,102,1);
                    }
                    .state.unRead {
                        color: #fd7304;
                    }
                }
            }
            >.info{
                box-sizing: border-box;
                padding: 0 18px;
                font-size:12px;
                font-family:PingFang-SC-Medium;
                font-weight:500;
                color:rgba(102,102,102,1);
                line-height:20px;
            }
        }
        >.note{
            background-color: #fff;
            width: 100%;
            position: fixed;
            left: 0;
            bottom: 0;
            height:45px;
            border-top: 1PX solid rgba(239,239,239,1);
            .inputView{
                width:343px;
                height:30px;
                line-height: 30px;
                background:rgba(249,249,249,1);
                border-radius:3px;
                margin: 7px auto;
                font-size:12px;
                font-family:PingFang-SC-Medium;
                font-weight:500;
                color:rgba(153,153,153,1);
                padding-left: 10px;
            }
        }
        >.mask{
            position: absolute;
            z-index: 9998;
            top: 0;
            left: 0;
            width:100%;
            height:100%;
            background-color:rgba(0,0,0,.4);
        }
        >.noteWrite{
            position: absolute;
            bottom: 0;
            z-index: 9999;
            width:100%;
            height:240px;
            background-color: #fff;
            border-radius:10px 10px 0px 0px;
            box-sizing: border-box;
            padding: 20px 16px 0 ;
            textarea{
                display: block;
                box-sizing: border-box;
                padding: 15px 10px;
                width:343px;
                height:170px;
                background:rgba(249,249,249,1);
                border-radius:3px;
                border: 0;
                outline: none;
                font-size:12px;
                font-family:PingFang-SC-Medium;
                font-weight:500;
                color:rgba(153,153,153,1);
                margin-bottom: 10px;
            }
            .btnBar{
                display: flex;
                height:30px;
                justify-content: space-between;
                font-size:12px;
                font-family:PingFang-SC-Medium;
                font-weight:500;
                align-items: center;
                .check{

                }
                .btn{
                    width:80px;
                    height:30px;
                    background:rgba(235,77,68,1);
                    border-radius:3px;
                    line-height: 30px;
                    font-size:14px;
                    font-family:PingFang-SC-Medium;
                    font-weight:500;
                    color:rgba(255,255,255,1);
                    text-align: center;
                }
            }
        }
    }
</style>

